/**
* 模版
**/ 

<template>
  <div class="addFormBox">
    <hr>
    <h1>试卷渲染</h1>
    选择题<p>{{SelectionDetail}}</p>
    阅读题<p>{{readingQu}}</p>
    <hr>
    <h1>阅读题渲染</h1>
    <hr>
    <p>{{textR}}</p>
    <p v-for="topicO in topics" :key="topicO.id">{{topicO.topic}}</p>
    <p v-for="option in options" :key="option.id">{{option.opt}}</p>
    <hr>
    <div v-for="(item,index) in readingQu" :key="index">
      <div class="formOuterBox">
        <div class="formCotantBox">
          <h3>阅读题信息 {{index+1}}</h3>
          <!-- 表单内容 -->
          <el-form label-width="80px">
            <el-form-item label="题目题干">
              <el-input v-model="item.topic"></el-input>
            </el-form-item>
            <el-form-item label="选项1">
              <el-input v-model="item.option1"></el-input>
            </el-form-item>
            <el-form-item label="选项2">
              <el-input v-model="item.option2"></el-input>
            </el-form-item>
            <el-form-item label="选项3">
              <el-input v-model="item.option3"></el-input>
            </el-form-item>
            <el-form-item label="选项4">
              <el-input v-model="item.option4"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div>
          <el-button @click="addTopic" type="success">添加题目</el-button>
          <el-button @click="addOption" >添加选项</el-button>
          <el-button v-if="index!=0" @click="removeTopicIdx(item, index)" type="danger">删除此条题目</el-button>
          <el-button @click="submit" type="primary" plain>提交题目</el-button>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
// 导入组件
import { readingQuList } from '../../api/readingQu.js'
import { addReadingQu } from '../../api/readingQu.js'
// 导出模块
export default {
  // 模块名字
  name: 'readingQuList',
  // 模块数据
  data() {
    //数据
    return {
      readingQu:[
        {
          topic:'',
          option1:'',
          option2:'',
          option3:'',
          option4:'',
        }
      ],
      topics: [
        {
          id: 0,
          topic: '',
          questionType: null,
          questionInventory: null,
          questionText: {
            id: 0,
            dec: '',
          },
        },
      ],
      options: [
        {
          id: 0,
          opt: '',
          status: 'n',
          topic: {
            id: 0,
            topic: '',
            questionType: null,
            questionInventory: null,
            questionText: null,
          },
        }
      ],
      textR: '',
      QuNum:1,
      SelectionDetail:'',
      readingQu:'',
    }
  },
  // 注册组件
  components: {
    // headerComponent
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    loadReadingQu() {
      readingQuList()
        .then((result) => {
          console.log(result)
          this.options = result.data.data.options
          this.textR = result.data.data.text4
          this.topics = result.data.data.topics
        })
        .catch((err) => {})
    },
    addTopic() {
      // 定义一个标识，通过标识判断是否能添加信息
      let statusType = true;
      this.readingQu.forEach((item) => {
        if (
          item.topic == "" 
        ) {
          this.$message({
            message: "请完善信息后在添加",
            type: "warning",
          });
          statusType = false;
        }
      });
      if (statusType) {
        this.readingQu.push({
          topic:'',
          option1:'',
          option2:'',
          option3:'',
          option4:'',
        });
      }
    },
    // 删除操作
    removeTopicIdx(item, index) {
      this.readingQu.splice(index, 1);
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },

    addOption(){
      console.log(this.readingQu);
    },

    getOptionsLength(){
      console.log(this.readingQu);
    },

// 向后端发送json数据
    submit(){
      console.log(this.readingQu);
      addReadingQu(this.readingQu).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data.code)
          alert('添加成功')
        }
      })
    },

  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    this.loadReadingQu()
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>
// scoped 样式只在本组件使用
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
</style>
<style scoped>
.addFormBox {
  margin: 20px;
}
.formOuterBox {
  margin-bottom: 20px;
  padding: 30px 40px;
  background: white;
  border-radius: 30px;
}
h3 {
  margin: 0px 0px 20px 0px;
}
</style>